<template>
  <div>

    <div style="padding-bottom: 20px">
      <el-button size="mini" type="primary" @click="createLive">添加直播</el-button>
    </div>

    <el-table
      :data="liveList"
      row-key="id"
      border
      stripe
      default-expand-all
    >

      <el-table-column label="直播名称" prop="title" />

      <el-table-column align="center" label="直播类型">
        <template slot-scope="scope" align="center">
          <dic-list-show :value="scope.row.liveType" dic-code="live_type"/>
        </template>
      </el-table-column>

      <el-table-column label="开始时间" prop="startTime" />

      <el-table-column label="直播时长/分钟" align="center" prop="duration" />

      <el-table-column align="center" label="操作">
        <template slot-scope="scope" align="center">

          <el-button v-if="scope.row.id" type="primary" title="直播信息" size="mini" icon="el-icon-edit" circle @click="showLive(scope.row, scope.$index)" />
          <el-button v-if="scope.row.id" type="primary" size="mini" icon="el-icon-video-camera" circle @click="previewLive(scope.row)" />
          <el-button type="danger" title="删除" size="mini" icon="el-icon-delete" circle @click="removeLive(scope.$index)" />
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="直播信息"
      width="50%"
      @close="dialogVisible=false"
    >

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

        <el-form-item label="直播类型" prop="liveType">
          <dic-list-select v-model="postForm.liveType" dic-code="live_type" style="width: 100%"/>
        </el-form-item>

        <el-form-item label="直播名称" prop="title">
          <el-input
            v-model="postForm.title"
            :rows="2"
          />
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="postForm.startTime"
            size="small"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
          />
        </el-form-item>

        <el-form-item label="直播时长" prop="duration">
          <el-input-number v-model="postForm.duration" :min="1" :max="9999" size="small" /> 分钟
          <div class="alert">
            注意：只有在直播期间，学员才可以播放直播，即从{{ postForm.startTime || '【开始时间】' }}开始的{{ postForm.duration || '【直播时长】' }}分钟内可以观看！
          </div>
        </el-form-item>

        <el-form-item v-if="postForm.liveType==1 && postForm.pushUrl" label="推流地址">
          <el-input
            v-model="postForm.pushUrl"
            :rows="2"
            type="textarea"
            readonly
          />
          <el-alert type="warning" title="注意：仅在直播时间段内才支持推流" style="line-height: 20px; margin-top: 10px" />
          <el-button type="primary" size="small" icon="el-icon-document-copy" style="margin-top: 10px" @click="copy(postForm.pushUrl,$event)">复制</el-button>
        </el-form-item>

        <el-form-item v-if="postForm.liveType==1 && postForm.m3u8Url" label="直播地址" prop="m3u8Url">

          <el-input
            v-model="postForm.m3u8Url"
            :rows="2"
            type="textarea"
            class="live-url"
            placeholder="ss"
            readonly
          />

          <el-button type="primary" size="small" icon="el-icon-document-copy" style="margin-top: 10px" @click="copy(postForm.m3u8Url,$event)">复制</el-button>

        </el-form-item>

        <el-form-item v-if="postForm.liveType==2" label="直播地址" prop="outUrl">

          <el-input
            v-model="postForm.outUrl"
            :rows="2"
            type="textarea"
            class="live-url"
            placeholder="嵌入页面的播放器地址，如虎牙：直播间-->分享-->复制播放器地址，得到：https://liveshare.huya.com/iframe/xxxxx"
          />

        </el-form-item>

        <el-form-item label="直播描述">
          <el-input v-model="postForm.intro" type="textarea" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="postForm.id" :loading="loading" type="primary" @click="handleSave">保存</el-button>
        <el-button v-else :loading="loading" type="primary" @click="handleGen">下一步</el-button>
      </div>

    </el-dialog>

    <el-dialog :visible.sync="videoShow" @close="closeView">
      <live-player v-if="videoShow && postForm.liveType==1" v-model="postForm.flvUrl" />
      <iframe v-if="videoShow && postForm.liveType==2" :src="postForm.outUrl" style="width: 100%; min-height: 500px"/>
    </el-dialog>

  </div>
</template>

<script>

import clip from '@/utils/clipboard'
import LivePlayer from '@/components/LivePlayer'
import { genLive } from '@/api/course/live'
import DicListSelect from '@/components/DicListSelect'
import DicListShow from '@/components/DicListShow'

export default {
  name: 'LiveList',
  components: {
    DicListShow,
    DicListSelect,
    LivePlayer
  },
  props: {
    value: Array
  },
  data() {
    return {
      index: -1,
      loading: false,
      m3u8Url: false,
      dialogVisible: false,
      liveList: [],
      postForm: {},
      videoShow: false,
      videoUrl: '',
      current: {},
      rules: {
        liveType: [
          { required: true, message: '直播类型不能为空！' }
        ],
        title: [
          { required: true, message: '直播名称不能为空！' }
        ],
        startTime: [
          { required: true, message: '直播开始时间不能为空！' }
        ],
        duration: [
          { required: true, message: '直播时长不能为空！' }
        ],
        outUrl: [
          { required: true, message: '直播地址不能为空！' }
        ]
      }
    }
  },

  watch: {

    value: {
      handler(val) {
        this.liveList = val
      },
      deep: true
    },

    // 检测查询变化
    liveList: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true
    },

    // 重新生成直播地址
    'postForm.duration': {
      handler(newVal, oldVal) {
        console.log('watch dd...new', newVal)
        console.log('watch dd...old', oldVal)

        if (oldVal != null && oldVal != undefined && newVal != null && newVal != undefined && oldVal !== newVal) {
          this.handleGen()
        }
      }
    },
    'postForm.startTime': {
      handler(newVal, oldVal) {
        if (oldVal != null && oldVal != undefined && newVal != null && newVal != undefined && oldVal !== newVal) {
          this.handleGen()
        }
      }
    }

  },
  created() {
    this.liveList = this.value
  },
  methods: {

    // 保存直播信息
    handleSave() {
      this.dialogVisible = false
      if (this.index == -1) {
        this.liveList.push(this.postForm)
      } else {
        this.postForm = {}
      }
    },

    createLive() {
      this.index = -1
      this.postForm = {}
      this.dialogVisible = true
    },

    removeLive(index) {
      this.liveList.splice(index, 1)
    },

    showLive(data, index) {
      this.index = index
      this.postForm = data
      this.dialogVisible = true
    },

    copy(url, e) {
      clip(url, e)
    },

    previewLive(v) {
      this.videoShow = true
      this.postForm = v
    },

    closeView() {
      this.videoUrl = ''
    },

    // 生成直播地址
    handleGen() {
      this.$refs.postForm.validate(valid => {
        if (!valid) {
          return
        }

        genLive().then(res => {
          const data = res.data
          this.postForm.id = data.id
          this.postForm.pushUrl = data.pushUrl
          this.postForm.m3u8Url = data.m3u8Url
          this.postForm.flvUrl = data.flvUrl
          this.postForm.pullUrl = data.pullUrl
          this.$forceUpdate()
        })
      })
    }

  }
}
</script>

<style scoped>
.alert {
  font-size: 12px;
  line-height: 18px;
  color: #ff0000;
  padding: 8px 0px 0px 0px;
}
</style>
